<template>
	<view>
        <!-- 搜索栏 -->
		<uni-search-bar radius="5" v-model="inputs"  @focus="clickMain" placeholder="搜索艺术家" clearButton="auto" cancelButton="none" />
		<!-- 滑动操作 -->
		<uni-swipe-action>
			<!-- 画家列表 -->
			<uni-list class="list-news" v-for="(item,index) of listPainter" :key="index">
				<view class="search">
					<uni-swipe-action-item>
						<image :src="item.headUrl" mode="aspectFit" class="image-news" @click="toDetail(item.id)"></image>
						<view class="time-news">浏览量：{{item.browseNum}}</view>
						<view class="title-news" @click="toDetail(item.id)">画家：{{item.painterName}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
		</uni-swipe-action>
		
		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'

export default {
	data() {
		return {
			listPainter:[],
			word:'',
			// 搜索栏值
			inputs: '',
			pageIndex: 1,
			pageSize: 10,
			totalCount:0,
			hasMore: true,
			//当前选项卡
			currentTab: '/pages/search/searchPainterList'
		}
	},
	computed: {
	},
	methods: {
		clickMain(){
			uni.navigateTo({
				url: '/pages/search/search',
			});
		},
		search(keyword){
			console.log("onload search searchPainterList keyword : " , keyword)
			uni.request({
						url: global.baseUrl + 'api/painter/result', // 接口地址
						method:'get',
						dataType: "json",
						data:{
							painterName: keyword
						},
						header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						},
						success: (res) => {
							if(res.data.code==0){
								console.log("res.data.data ：  ", res.data.data)
								this.listPainter=res.data.data
								
							}else{
								console.log("request result error: " ,res.data.code)
							}
						},
						fail: (error) => {
						  console.log(error)
						}
			})
		},
		toDetail(id) {
			  console.log("List item id :  " , id)
		      uni.navigateTo({
		        url: '../painterList/painterDetail?id=' + id,
		      })
		}
	},
	onLoad(option) {
		console.log('接收到的参数', option.inputs); // 输出{ paramName: 'value' }
		console.log("onLoad option word  :   ", option.inputs)
		this.word= option.inputs,
		this.search(option.inputs) // 在页面加载时调用fetchData方法获取数据
	},
	onReachBottom(){
	    console.log('触底了')
		    if (this.pageIndex * this.pageSize >= this.totalCount) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			} else {
				if (this.pageIndex <= this.pageIndex - 1) {
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.pageIndex++
					this.search(this.word)
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
		},
	// 页面下拉时触发，与 onLoad 等生命周期函数平级
	onPullDownRefresh() {
	    console.log('refresh');
	    setTimeout(function () {
	        // 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
	        uni.stopPullDownRefresh();
	    }, 1000);
	}
}
</script>

<style scoped>
	.list-news {
		width: 94%;
		margin: auto;
	}
 
	.search {
		margin-top: 10rpx;
		position: relative;
		height: 210rpx;
	}
 
	.image-news {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
	}
 
	.time-news {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
 
	.title-news {
		width: 480rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: absolute;
		bottom: 10rpx;
		left: 220rpx;
	}
</style>

